<template>
  <div class="strut-div">
    <div class="party-build-rl">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="card-item" style="width: 100%; height: 440px;">
            <p class="card-title">三会一课开展情况</p>
            <div class="card-div"><common-pieNew-chart ref="threeMeOneCl" :config="threeMeOneClConfig"></common-pieNew-chart></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card-item" style="height: 440px; margin-top: 20px;">
            <p class="card-title">发展党员统计</p>
            <div class="card-div"><common-pieNew-chart ref="memGrow" :config="memGrowConfig"></common-pieNew-chart></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card-item" style="height: 440px; margin-top: 20px;">
            <p class="card-title">党员流动情况</p>
            <div class="card-div"><common-pieNew-chart ref="flowSituation" :config="flowSituationConfig"></common-pieNew-chart></div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="card-item" style="width: 100%;height: 440px; margin-top: 20px;">
            <p class="card-title">流动党员统计</p>
            <div class="card-div"><common-bar-chart ref="flowMem" :config="flowMemConfig"></common-bar-chart></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="party-build-rm">
      <div class="card-item" style="height: 440px;">
        <p class="card-title">组织讨论关键词</p>
        <div class="card-div"><key-word-cloud></key-word-cloud></div>
      </div>
      <div class="card-item" style="height: 900px; margin-top: 20px;">
        <p class="card-title">党费缴纳</p>
        <div class="card-div"><party-dues></party-dues></div>
      </div>
    </div>
    <div class="party-build-rr">
      <div class="card-item" style="height: 900px;">
        <p class="card-title">全县支部排行榜</p>
        <div class="card-div" id="branchRank" style="overflow-y: scroll;">
          <div class="scroll-container">
            <div class="branch-rank" v-for="branch in branchRank" :key="branch.deptId">
              <img :src="branch.imgUrl" />
              <div>
                <p class="branch-name">
                  支部名称：
                  <span>{{ branch.deptName }}</span>
                </p>
                <p class="mem-number">
                  党员人数：
                  <span>{{ branch.pNum }}</span>
                  人
                </p>
                <p class="branch-score">
                  积分：
                  <span>{{ branch.score }}</span>
                  分
                </p>
                <p class="branch-fouces">
                  <span>{{ branch.focus }}</span>
                  人关注
                  <span>{{ branch.good }}</span>
                  人点赞
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-item" style="height: 440px; margin-top: 20px;">
        <p class="card-title">动态</p>
        <div class="card-div" id="partyDynamic" style="overflow-y: scroll;">
          <div class="scroll-container">
            <div class="branch-dynamic" v-for="(item, index) in dynamic" :key="index">
              <p>{{ item.title }}</p>
              <label>{{ item.time }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
import flowData from '../../../../static/ht-party-mem-flow.json';
import KeyWordCloud from '@/views/party-building/party-building-right/key-wold-cloud.vue';
import PartyDues from '@/views/party-building/party-building-right/party-dues.vue';
import branchRank from '../../../../static/ht-party-branch-rank.json';

import autoScroll from '@/util/autoScroll.js';

export default {
  components: {
    CommonPieNewChart,
    CommonBarChart,
    KeyWordCloud,
    PartyDues
  },
  data() {
    return {
      branchRankInterval: null,
      partyDynamicInterval: null,
      branchRank: branchRank,
      dynamic: [
        {
          title: '洪洞县“六大行动”确保主题教育高质量开局',
          time: '2019年09月02日'
        },
        {
          title: '洪洞县“初心品牌”主题党日活动让学习教育“活”起来',
          time: '2019年08月26日'
        },
        {
          title: '洪洞县六大活动推动“不忘初心、牢记使命”主题教育预热升温',
          time: '2019年08月13日'
        },
        {
          title: '洪洞：党员电教片拍摄质量再提高',
          time: '2019年08月06日'
        },
        {
          title: '洪洞县“三大行动”推动基层党组织全面过硬',
          time: '2019年07月22日'
        },
        {
          title: '洪洞拍摄《永远跟党走》系列专题片',
          time: '2019年07月11日'
        },
        {
          title: '洪洞县十大“红色+”活动庆祝建党98周年',
          time: '2019年06月24日'
        },
        {
          title: '洪洞县“三管齐下”为干事创业干部撑腰鼓劲',
          time: '2019年06月09日'
        },
        {
          title: '洪洞县委组织部扎实做好机构改革中干部档案转递工作',
          time: '2019年05月24日'
        }
      ],
      threeMeOneClConfig: {
        option: {
          id: 'threeMeOnePie',
          title: [
            {
              text: '支部党\n员大会',
              x: '14.8%',
              y: '58%',
              textAlign: 'center',
              textBaseline: 'middle',
              textStyle: {
                fontSize: 20,
                color: '#ffffff'
              }
            },
            {
              text: '支部\n委员会',
              x: '36.8%',
              y: '58%',
              textAlign: 'center',
              textBaseline: 'middle',
              textStyle: {
                fontSize: 20,
                color: '#ffffff'
              }
            },
            {
              text: '党小\n组会',
              x: '60.8%',
              y: '58%',
              textAlign: 'center',
              textBaseline: 'middle',
              textStyle: {
                fontSize: 20,
                color: '#ffffff'
              }
            },
            {
              text: '党课',
              x: '83.8%',
              y: '59.5%',
              textAlign: 'center',
              textBaseline: 'middle',
              textStyle: {
                fontSize: 20,
                color: '#ffffff'
              }
            }
          ],
          color: ['#45F0EA', '#9B04F9', '#0A8CFF'],
          legend: {
            show: true,
            left: '40%',
            top: '12%',
            orient: 'horizontal',
            textStyle: {
              color: '#fff',
              fontSize: 15
            }
          },
          dataset: {
            source: [
              ['', '支部党员大会', '支部委员会', '党小组会', '党课'],
              ['未完成', 1.1, 16.4, 15.1, 13.3],
              ['已完成', 16.5, 72.1, 65.7, 43.1],
              ['超额完成', 86.1, 17.2, 9.5, 86.4]
            ]
          },
          series: [
            {
              type: 'pie',
              radius: ['30%', '45%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {d}%',
                  fontSize: 16
                }
              },
              center: ['15%', '60%'],
              encode: {
                itemName: '',
                value: '支部党员大会'
              }
            },
            {
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['37%', '60%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {d}%',
                  fontSize: 16
                }
              },
              encode: {
                itemName: '',
                value: '支部委员会'
              }
            },
            {
              type: 'pie',
              radius: ['30%', '45%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {d}%',
                  fontSize: 16
                }
              },
              center: ['61%', '60%'],
              encode: {
                itemName: '',
                value: '党小组会'
              }
            },
            {
              type: 'pie',
              radius: ['30%', '45%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {d}%',
                  fontSize: 16
                }
              },
              center: ['84%', '60%'],
              encode: {
                itemName: '',
                value: '党课'
              }
            }
          ]
        }
      },
      memGrowConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'memGrowPie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9', '#D78155', '#DAB54C', '#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '72%',
            top: '32%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 18
            },
            data: ['入党申请人', '入党积极分子', '发展对象', '发展党员', '预备党员转正']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['25%', '50%'],
              center: ['38%', '53%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [
                { value: 102, name: '入党申请人' },
                { value: 186, name: '入党积极分子' },
                { value: 268, name: '发展对象' },
                { value: 216, name: '发展党员' },
                { value: 106, name: '预备党员转正' }
              ]
            }
          ]
        }
      },
      flowSituationConfig: {
        option: {
          id: 'flowSituationPie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9', '#D78155', '#DAB54C', '#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '60%',
            top: '10%',
            orient: 'horizontal',
            textStyle: {
              color: '#FFF',
              fontSize: 18
            },
            data: ['流动党员', '失联党员']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['45%', '60%'],
              center: ['50%', '55%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17',
                  position: 'inside'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [{ value: 356, name: '流动党员' }, { value: 89, name: '失联党员' }]
            }
          ]
        }
      },
      flowMemConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'flowMemBar',
          xAxis: flowData[0].data,
          axisLabel: {
            interval: 0,
            rotate: 25
          },
          y: [
            {
              axis: {
                min: 0,
                max: 50,
                name: '人'
              },
              title: flowData[1].name,
              data: flowData[1].data,
              color: '#F2704D',
              stack: '1'
            },
            {
              title: flowData[2].name,
              data: flowData[2].data,
              color: '#FFCC00',
              stack: '1'
            },
            {
              title: flowData[3].name,
              data: flowData[3].data,
              color: '#B90000',
              stack: '2'
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.$refs.threeMeOneCl.initChart();
    this.$refs.memGrow.initChart();
    this.$refs.flowMem.initChart();
    this.$refs.flowSituation.initChart();

    this.getBranchRank();

    this.branchRankInterval = autoScroll.autoScrollList('branchRank')
    this.partyDynamicInterval = autoScroll.autoScrollList('partyDynamic')

  },
  methods: {
    getBranchRank() {
      this.$get(this.$api.getBranchRank, {
        deptId: window.localStorage.getItem('mapId'),
        page: 1,
        size: 10
      }).then(res => {
        // console.log(res)
      });
    }
  },
  beforeDestroy() {
    autoScroll.cancelScroll(this.branchRankInterval);
    autoScroll.cancelScroll(this.partyDynamicInterval);
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.party-build-rl {
  float: left;
  width: 1240px;
  height: 1360px;
  margin-left: 10px;
}
.party-build-rm {
  float: left;
  width: 610px;
  height: 1360px;
  margin-left: 20px;
}
.party-build-rr {
  float: left;
  width: 610px;
  height: 1360px;
  margin-left: 20px;
}

.card-item {
  width: 610px;
}
.card-div {
  height: calc(100% - 54px);
}
.branch-rank {
  margin: 20px;
  width: 570px;
  height: 160px;
  background-color: rgba(7, 38, 95, 0.6);
  border-radius: 10px;
  > img {
    width: 120px;
    height: 120px;
    background-color: deepskyblue;
    border-radius: 10px;
    float: left;
    margin: 20px;
    object-fit: cover;
  }
  > div {
    float: left;
    width: 400px;
    > p {
      font-size: 18px;
      margin-top: 12px;
      word-wrap: pre-wrap;
      > span {
        color: #ffea00;
      }
    }
  }
}

.branch-dynamic {
  margin: 10px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  > p {
    font-size: 20px;
    line-height: 2em;
  }
  > label {
    font-size: 18px;
    line-height: 2em;
  }
}

.element::-webkit-scrollbar {
  display: none;
}
</style>
